<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Migrating to 4.0 from 3.x | Vuex</title>
    <meta name="description" content="Centralized State Management for Vue.js">
    <link rel="stylesheet" href="static/css/style.34a39eef.css">
    <link rel="modulepreload" href="https://vuex.vuejs.org/assets/Home.8c77385a.js">
    <link rel="modulepreload" href="https://vuex.vuejs.org/assets/app.a0c675ce.js">
    <link rel="modulepreload" href="https://vuex.vuejs.org/assets/guide_migrating-to-4-0-from-3-x.md.66bd8cdf.lean.js">
    <link rel="modulepreload" href="https://vuex.vuejs.org/assets/app.a0c675ce.js">
    <link rel="icon" href="https://vuex.vuejs.org/logo.png">
    <link rel="apple-touch-icon" href="https://vuex.vuejs.org/icons/apple-touch-icon-152x152.png">
    <link rel="mask-icon" href="https://vuex.vuejs.org/icons/safari-pinned-tab.svg" color="#3eaf7c">
    <meta name="msapplication-TileImage" content="/icons/msapplication-icon-144x144.png">
    <meta name="twitter:title" content="Migrating to 4.0 from 3.x | Vuex">
    <meta property="og:title" content="Migrating to 4.0 from 3.x | Vuex">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-675d8756=""><div class="sidebar-button" data-v-675d8756=""><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewbox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class=""></path></svg></div><a class="nav-bar-title" href="javascript:;" aria-label="Vuex, back to home" data-v-675d8756="" data-v-4a583abe=""><!----> Vuex</a><div class="flex-grow" data-v-675d8756=""></div><div class="nav" data-v-675d8756=""><nav class="nav-links" data-v-675d8756="" data-v-eab3edfe=""><!--[--><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item active" href="javascript:;" data-v-b8818f8c="">Guide <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item" href="javascript:;" data-v-b8818f8c="">API Reference <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">Release Notes <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">v4.x</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">v3.x</span><span class="icon" data-v-bbc27490=""><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-bbc27490=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">Languages</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item active" href="javascript:;" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">English</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item" href="javascript:;" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">简体中文</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item" href="javascript:;" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">日本語</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item" href="javascript:;" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">Português</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav></div><!--[--><!--]--></header><aside class="sidebar" data-v-83e92a68=""><nav class="nav-links nav" data-v-83e92a68="" data-v-eab3edfe=""><!--[--><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item active" href="javascript:;" data-v-b8818f8c="">Guide <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item" href="javascript:;" data-v-b8818f8c="">API Reference <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">Release Notes <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">v4.x</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">v3.x</span><span class="icon" data-v-bbc27490=""><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-bbc27490=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">Languages</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item active" href="javascript:;" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">English</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item" href="javascript:;" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">简体中文</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item" href="javascript:;" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">日本語</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item" href="javascript:;" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">Português</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav><!--[--><!--]--><ul class="sidebar-links" data-v-83e92a68=""><!--[--><li class="sidebar-link"><p class="sidebar-link-item">Introduction</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">What is Vuex?</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Installation</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Getting Started</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">Core Concepts</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">State</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Getters</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Mutations</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Actions</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Modules</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">Advanced</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Application Structure</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Composition API</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Plugins</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Strict Mode</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Form Handling</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Testing</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Hot Reloading</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">TypeScript Support</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">Migration Guide</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item active" href="javascript:;">Migrating to 4.0 from 3.x</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Breaking Changes</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Installation process</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">TypeScript support</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Bundles are now aligned with Vue 3</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">createLogger function is exported from the core module</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">New Features</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">New useStore composition function</a><!----></li></ul></li></ul></li></ul></li><!--]--></ul><!--[--><!--]--></aside><!-- TODO: make this button accessible --><div class="sidebar-mask"></div><main class="page" data-v-7eddb2c4=""><div class="container" data-v-7eddb2c4=""><!--[--><!--]--><div style="position:relative;" class="content" data-v-7eddb2c4=""><div><h1 id="migrating-to-4-0-from-3-x" tabindex="-1">Migrating to 4.0 from 3.x <a class="header-anchor" href="javascript:;" aria-hidden="true">#</a></h1><p>Almost all Vuex 4 APIs have remained unchanged from Vuex 3. However, there are still a few breaking changes that you must fix.</p><ul><li><a href="javascript:;">Breaking Changes</a><ul><li><a href="javascript:;">Installation process</a></li><li><a href="javascript:;">TypeScript support</a></li><li><a href="javascript:;">Bundles are now aligned with Vue 3</a></li><li><a href="javascript:;">&quot;createLogger&quot; function is exported from the core module</a></li></ul></li><li><a href="javascript:;">New Features</a><ul><li><a href="javascript:;">New &quot;useStore&quot; composition function</a></li></ul></li></ul><h2 id="breaking-changes" tabindex="-1">Breaking Changes <a class="header-anchor" href="javascript:;" aria-hidden="true">#</a></h2><h3 id="installation-process" tabindex="-1">Installation process <a class="header-anchor" href="javascript:;" aria-hidden="true">#</a></h3><p>To align with the new Vue 3 initialization process, the installation process of Vuex has changed. To create a new store, users are now encouraged to use the newly introduced createStore function.</p><div class="language-js"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vuex&#39;</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">state</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      count<span class="token operator">:</span> <span class="token number">1</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>To install Vuex to a Vue instance, pass the <code>store</code> instead of Vuex.</p><div class="language-js"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> store <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;./store&#39;</span>
<span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">&#39;./App.vue&#39;</span>

<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">createApp</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span>

app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>store<span class="token punctuation">)</span>

app<span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">&#39;#app&#39;</span><span class="token punctuation">)</span>
</code></pre></div><div class="tip custom-block"><p class="custom-block-title">NOTE</p><p>Whilst this is not technically a breaking change, you may still use the <code>new Store(...)</code> syntax, we recommend this approach to align with Vue 3 and Vue Router Next.</p></div><h3 id="typescript-support" tabindex="-1">TypeScript support <a class="header-anchor" href="javascript:;" aria-hidden="true">#</a></h3><p>Vuex 4 removes its global typings for <code>this.$store</code> within a Vue component to solve <a href="javascript:;" target="_blank" rel="noopener noreferrer">issue #994</a>. When used with TypeScript, you must declare your own module augmentation.</p><p>Place the following code in your project to allow <code>this.$store</code> to be typed correctly:</p><div class="language-ts"><pre><code><span class="token comment">// vuex-shim.d.ts</span>

<span class="token keyword">import</span> <span class="token punctuation">{</span> ComponentCustomProperties <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Store <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vuex&#39;</span>

<span class="token keyword">declare</span> <span class="token keyword">module</span> <span class="token string">&#39;@vue/runtime-core&#39;</span> <span class="token punctuation">{</span>
  <span class="token comment">// Declare your own store states.</span>
  <span class="token keyword">interface</span> <span class="token class-name">State</span> <span class="token punctuation">{</span>
    count<span class="token operator">:</span> <span class="token builtin">number</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">interface</span> <span class="token class-name">ComponentCustomProperties</span> <span class="token punctuation">{</span>
    $store<span class="token operator">:</span> Store<span class="token operator">&lt;</span>State<span class="token operator">&gt;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>You can learn more in the <a href="javascript:;">TypeScript Support</a> section.</p><h3 id="bundles-are-now-aligned-with-vue-3" tabindex="-1">Bundles are now aligned with Vue 3 <a class="header-anchor" href="javascript:;" aria-hidden="true">#</a></h3><p>The following bundles are generated to align with Vue 3 bundles:</p><ul><li><code>vuex.global(.prod).js</code><ul><li>For direct use with <code>&lt;script src=&quot;...&quot;&gt;</code> in the browser. Exposes the Vuex global.</li><li>Global build is built as IIFE, and not UMD, and is only meant for direct use with <code>&lt;script src=&quot;...&quot;&gt;</code>.</li><li>Contains hard-coded prod/dev branches and the prod build is pre-minified. Use the <code>.prod.js</code> files for production.</li></ul></li><li><code>vuex.esm-browser(.prod).js</code><ul><li>For use with native ES module imports (including module supporting browsers via <code>&lt;script type=&quot;module&quot;&gt;</code>.</li></ul></li><li><code>vuex.esm-bundler.js</code><ul><li>For use with bundlers such as <code>webpack</code>, <code>rollup</code> and <code>parcel</code>.</li><li>Leaves prod/dev branches with <code>process.<wbr>env.NODE_ENV</code> guards (must be replaced by bundler).</li><li>Does not ship minified builds (to be done together with the rest of the code after bundling).</li></ul></li><li><code>vuex.cjs.js</code><ul><li>For use in Node.js server-side rendering with <code>require()</code>.</li></ul></li></ul><h3 id="createlogger-function-is-exported-from-the-core-module" tabindex="-1"><code>createLogger</code> function is exported from the core module <a class="header-anchor" href="javascript:;" aria-hidden="true">#</a></h3><p>In Vuex 3, <code>createLogger</code> function was exported from <code>vuex/dist/logger</code> but it&#39;s now included in the core package. The function should be imported directly from the <code>vuex</code> package.</p><div class="language-js"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createLogger <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vuex&#39;</span>
</code></pre></div><h2 id="new-features" tabindex="-1">New Features <a class="header-anchor" href="javascript:;" aria-hidden="true">#</a></h2><h3 id="new-usestore-composition-function" tabindex="-1">New <code>useStore</code> composition function <a class="header-anchor" href="javascript:;" aria-hidden="true">#</a></h3><p>Vuex 4 introduces a new API to interact with the store in Composition API. You can use the <code>useStore</code> composition function to retrieve the store within the component <code>setup</code> hook.</p><div class="language-js"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vuex&#39;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>You can learn more in the <a href="javascript:;">Composition API</a> section.</p></div></div><footer class="page-footer" data-v-7eddb2c4="" data-v-fb8d84c6=""><div class="edit" data-v-fb8d84c6=""><div class="edit-link" data-v-fb8d84c6="" data-v-1ed99556=""><a class="link" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-1ed99556="">Edit this page on GitHub <svg class="icon outbound icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-1ed99556=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="updated" data-v-fb8d84c6=""><p class="last-updated" data-v-fb8d84c6="" data-v-5797b537=""><span class="prefix" data-v-5797b537="">Last Updated:</span><span class="datetime" data-v-5797b537=""></span></p></div></footer><div class="next-and-prev-link" data-v-7eddb2c4="" data-v-38ede35f=""><div class="container" data-v-38ede35f=""><div class="prev" data-v-38ede35f=""><a class="link" href="javascript:;" data-v-38ede35f=""><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-38ede35f=""><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-38ede35f="">TypeScript Support</span></a></div><div class="next" data-v-38ede35f=""><!----></div></div></div><!--[--><!--]--></div></main></div><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"api_index.md\":\"4b45326e\",\"guide_actions.md\":\"9c977133\",\"guide_composition-api.md\":\"e01a428e\",\"guide_forms.md\":\"88f1ed54\",\"guide_getters.md\":\"2c5a0a0f\",\"guide_hot-reload.md\":\"c48e843e\",\"guide_index.md\":\"9dd21f7f\",\"guide_migrating-to-4-0-from-3-x.md\":\"66bd8cdf\",\"guide_modules.md\":\"95d32beb\",\"guide_mutations.md\":\"30cb1589\",\"guide_plugins.md\":\"a5e8be4d\",\"guide_state.md\":\"cfabbe36\",\"guide_strict.md\":\"9bdbc14d\",\"guide_structure.md\":\"0ac43d49\",\"guide_testing.md\":\"94c354a4\",\"guide_typescript-support.md\":\"946e4e74\",\"index.md\":\"7af08570\",\"installation.md\":\"71c4359e\",\"ja_api_index.md\":\"8ec02de7\",\"ja_guide_actions.md\":\"42d59860\",\"ja_guide_composition-api.md\":\"cf296415\",\"ja_guide_forms.md\":\"5c31ae2d\",\"ja_guide_getters.md\":\"a77b5c1e\",\"ja_guide_hot-reload.md\":\"4d14d06a\",\"ja_guide_index.md\":\"3a822b66\",\"ja_guide_migrating-to-4-0-from-3-x.md\":\"83fc993e\",\"ja_guide_modules.md\":\"bac522b8\",\"ja_guide_mutations.md\":\"9d14eba6\",\"ja_guide_plugins.md\":\"a729ddb7\",\"ja_guide_state.md\":\"6ac0e22d\",\"ja_guide_strict.md\":\"ca0af90e\",\"ja_guide_structure.md\":\"2ced329c\",\"ja_guide_testing.md\":\"246aa11b\",\"ja_guide_typescript-support.md\":\"95cb7cd9\",\"ja_index.md\":\"9e875040\",\"ja_installation.md\":\"f8883b0e\",\"ptbr_api_index.md\":\"c4a435dc\",\"ptbr_guide_actions.md\":\"4cd5afd8\",\"ptbr_guide_composition-api.md\":\"2de3cb0f\",\"ptbr_guide_forms.md\":\"d0a4a328\",\"ptbr_guide_getters.md\":\"0c62027a\",\"ptbr_guide_hot-reload.md\":\"edbb7f15\",\"ptbr_guide_index.md\":\"811fc38d\",\"ptbr_guide_migrating-to-4-0-from-3-x.md\":\"181af949\",\"ptbr_guide_modules.md\":\"035ca19f\",\"ptbr_guide_mutations.md\":\"a2194efe\",\"ptbr_guide_plugins.md\":\"ec68cab5\",\"ptbr_guide_state.md\":\"dbf6664a\",\"ptbr_guide_strict.md\":\"97901fcf\",\"ptbr_guide_structure.md\":\"493e0d23\",\"ptbr_guide_testing.md\":\"d9697706\",\"ptbr_guide_typescript-support.md\":\"d953d20b\",\"ptbr_index.md\":\"ce9751cf\",\"ptbr_installation.md\":\"fd9a58ca\",\"zh_api_index.md\":\"23227cff\",\"zh_guide_actions.md\":\"da25dd64\",\"zh_guide_composition-api.md\":\"9749c62a\",\"zh_guide_forms.md\":\"86e4b348\",\"zh_guide_getters.md\":\"d1f15af9\",\"zh_guide_hot-reload.md\":\"4832723a\",\"zh_guide_index.md\":\"6acb073d\",\"zh_guide_migrating-to-4-0-from-3-x.md\":\"9fad3617\",\"zh_guide_modules.md\":\"ce6036f0\",\"zh_guide_mutations.md\":\"2d3a9d53\",\"zh_guide_plugins.md\":\"8ab716ca\",\"zh_guide_state.md\":\"bacdc670\",\"zh_guide_strict.md\":\"99f28b75\",\"zh_guide_structure.md\":\"40f32e7f\",\"zh_guide_testing.md\":\"4d60bd56\",\"zh_guide_typescript-support.md\":\"a45beb7b\",\"zh_index.md\":\"a3d6a61d\",\"zh_installation.md\":\"14a19a2b\"}")</script>
    <script type="module" async="" src="static/js/app.a0c675ce.js"></script>
    
  </body>
</html>